<!--
***潮货中心***
-->
<template>
  <div class="main">
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>尖货精选</h3>
      </div>
    </v-header>
    <swiper :options="headSwiperOption" class="headSwiper" v-if="headSwiperData.length>0">
      <swiper-slide v-for="item in headSwiperData" :key='item.id' :style='css.borderShadow'>
        <div class="head-item"  @click="gotoPage(item)" >
          <img :src="item.textpictureurl | https" alt="" style="filter:brightness(0.9);">
          <p class="head-item-price" @click.stop="shareFn(item)"><em></em>分享可得 <span>¥{{item.sharepic}}</span></p>
          <div class="bottom">
            <div @click.stop="collection(item)" class="likeBtn" :class="{keep: item.isenshrine}"></div>
            <p class="head-item-title ellipsis">{{item.title}}</p>
            <div class="head-item-num">
              <span class="head-item-like">{{item.likenum}}</span>
              <span class="head-item-news">{{item.commentnum}}</span>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>

    <swiper v-if="allCategory.length > 0" :options='menuSwiper' class="category-swiper" :class="{inapp: $root.ISAPP}" :style="css.swiper">
      <swiper-slide class="category-item" :class='{clicked:categoryIndex === 0}'>
        <div @click='switchTab(0)'><span>全部</span></div>
      </swiper-slide>
      <swiper-slide v-for='(item, index) in allCategory' :key='index + 1' class="category-item" :class='{clicked:categoryIndex === index + 1}'>
        <div @click='switchTab(index + 1, item.id)'><span>{{item.name}}</span></div>
      </swiper-slide>
    </swiper>

    <div class="commodity-list">
      <v-list  :more-handle='loadmore' :more-handling='css.isLoading' :isend='css.isEnd' :load-handle='dataLoad'>
        <div class="commodity-item" v-for="item in list" :key='item.id'  @click="gotoPage(item)">
          <img :src="item.textpictureurl | https" alt="" srcset="" style="filter:brightness(0.9);">
          <div class="bottom">
            <div class="likeBtn" @click.stop="collection(item)" :class="{keep: item.isenshrine}"></div>
            <p class="commodity-item-price" @click.stop="shareFn(item)"><em></em>分享可得 <span>¥{{item.sharepic}}</span></p>
            <p class="commodity-item-title ellipsis">{{item.title}}</p>
            <div class="commodity-item-num">
              <span class="commodity-item-like">{{item.likenum}}</span>
              <span class="commodity-item-news">{{item.commentnum}}</span>
            </div>
          </div>
        </div>
      </v-list>
    </div>
    <Menu :position="menu" v-if="!$root.ISAPP"></Menu>
    <div class="shareTips" v-if="isTips">
      <img src="/static/img/d_tips.png" class="tips" alt="">
      <img src="/static/img/d_ok.png" @click="okFn" class="btn" alt="">
    </div>
  </div>
</template>
<script>
import Menu from './Menu'
import { GetDistribution, collection, switchClass, saveShare, shareToBeDistributionUrl } from '../../common/api/distribution'
export default {
  data() {
    return {
      distributionId: window.localStorage.getItem('distributionId'),
      menu: 'distributionCenter',
      headSwiperData: [],
      allCategory: [],
      list: [],
      headSwiperOption: {
        slidesPerView: 1.172,
        centeredSlides: true,
        autoplay: 2200,
        effect: 'coverflow',
        coverflow: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: false
        },
        loop: true
      },
      menuSwiper: {
        slidesPerView: 'auto',
        freeMode: true
      },
      categoryIndex: 0,
      categoryId : 0,
      css: {
        borderShadow: {
          borderRadius: '8px',
          overflow: 'hidden',
          boxShadow: '0 3px 7px 0px rgba(0,0,0,0.1)',
          background: '#ffffff',
          position: 'relative',
          fontSize: '0'
        },
        isLoading: false,
        isEnd: false,
        hasData: true,
        swiper:{}
      },

      pagination: {
        sumcount: 0,
        pagesize: 10,
        pageindex: 1,
        hasLoad: true
      },
      isTips:false,
    }
  },
  components: {
    Menu
  },
  created() {
    if (this.$root.ISAPP) {
      window.document.title = '潮货中心'
    }
    this.distributionId = this.getCurrentUser().distributionId

    if (!CSS.supports("position", "sticky") && !CSS.supports("position", "-webkit-sticky")) {
      this.css.swiper = {
          position : 'relative',
          top : 0
        }
    }

    if (!this.currentUser.token) {
      this.$router.push(`/login`)
    }
    shareToBeDistributionUrl({
      parentid: this.distributionId
    }).then(res=>{
      if (this.$root.ISAPP) {
        let opt = {
          name: 'getAppActivityShareContent',
          params: {
            sharetitle: res.shareinfo.title,
            sharecontent: res.shareinfo.content,
            sharepicurl: res.shareinfo.icon,
            shareurl: res.shareinfo.url,
            xcxurl: res.shareinfo.scene,
          }
        }
        this.javascriptBridge(opt)
      }else{
        this.initShare({
          info:{
            title:res.shareinfo.title,
            desc:res.shareinfo.content,
            img:res.shareinfo.icon,
            url:res.shareinfo.url
          }
        })
      }
    })

    this.getContent()
  },
  methods: {
    switchTab(index, id) {
      this.categoryIndex = index
      this.categoryId = id
      this.dataLoad()
    },

    getContent() {
      let opt = {
        page: this.pagination.pageindex,
        size: this.pagination.pagesize,
        id: this.categoryId,
      }
      if(!this.categoryId){
        GetDistribution(opt)
          .then(res => {
            if (res) {
              this.allCategory = res.category || []
              this.headSwiperData = res.mainlist || []
              if(this.pagination.pageindex === 1){
                this.list = res.list
              }else{
                this.list = this.list.concat(res.list)
                if(res.list.length === 0) {
                this.css.hasData = false
                this.css.isLoading = false
                this.css.isEnd = true
                }
              }
              this.headSwiperData.forEach(n => {
                let urltype = {
                  appUrl: {
                    name: 'gotoAppWebview',
                    params: {
                      distributionId: this.distributionId,
                      url: `${window.document.location.protocol}//${window.document.location.host}/distribution/detailed/${n.id}`
                    }
                  },
                  webUrl: {
                    name: '/distribution/detailed/',
                    params: {
                      id: n.id
                    }
                  }
                }
                this.$set(n, 'urlExist', true)
                this.$set(n, 'urltype', urltype)
              })
              this.list.forEach(n => {
                let urltype = {
                  appUrl: {
                    name: 'gotoAppWebview',
                    params: {
                      distributionId: this.distributionId,
                      url: `${window.document.location.protocol}//${window.document.location.host}/distribution/detailed/${n.id}`
                    }
                  },
                  webUrl: {
                    name: '/distribution/detailed/',
                    params: {
                      id: n.id
                    }
                  }
                }
                this.$set(n, 'urlExist', true)
                this.$set(n, 'urltype', urltype)
              })
              if (res.mainlist && res.mainlist.length > 0) {
                this.javascriptBridge('getH5BannerParam', { bannerTop: 0, bannerBottom: 295 })
              } else {
                this.javascriptBridge('getH5BannerParam', { bannerTop: 0, bannerBottom: 31 })
              }
            }
          })
          .catch(e => {
            this.css.hasData = false
            this.css.isLoading = false
            this.css.isEnd = true
            console.log(e)
          })
      } else {
        switchClass(opt)
          .then(res => {
            if (res.total > 0) {
              if(this.pagination.pageindex === 1){
                this.list = res.list
              }else{
                this.list = this.list.concat(res.list)
              }
              this.list = res.list
              this.list.forEach(n => {
                let urltype = {
                  appUrl: {
                    name: 'gotoAppWebview',
                    params: {
                      distributionId: this.distributionId,
                      url: `${window.document.location.protocol}//${window.document.location.host}/distribution/detailed/${n.id}`
                    }
                  },
                  webUrl: {
                    name: '/distribution/detailed/',
                    params: {
                      id: n.id
                    }
                  }
                }
                this.$set(n, 'urlExist', true)
                this.$set(n, 'urltype', urltype)
              })
            } else {
              this.css.hasData = false
              this.css.isLoading = false
              this.css.isEnd = true
            }
          })
          .catch(e => {
            this.css.hasData = false
            this.css.isLoading = false
            this.css.isEnd = true
            console.log(e)
          })
      }
    },
    collection(item) {
      if (item.isenshrine) {
        let opt = {
          imagetextid: item.id,
          isenshrine: 0
        }
        collection(opt)
          .then(res => {
            if (res) {
              this.$set(item, 'isenshrine', 0)
            }
          })
          .catch(e => {
            console.log(e)
          })
      } else {
        let opt = {
          imagetextid: item.id,
          isenshrine: 1
        }
        collection(opt)
          .then(res => {
            if (res) {
              this.$set(item, 'isenshrine', 1)
            }
          })
          .catch(e => {
            console.log(e)
          })
      }
    },

    gotoPage(item) {
      console.log('click item: ', this.$root.ISAPP, item)
      if (this.$root.ISAPP) {
        this.javascriptBridge(item.urltype.appUrl)
      } else {
        let routePath = item.urltype.webUrl.name
        let paramId = item.urltype.webUrl.params.id
        this.$router.push(routePath + paramId)
      }
    },

    shareFn(item) {
      let params = {
        imagetextid: this.$route.params.id
      }
      if (item && item.id) {
        console.log('item: ', item)
        params.imagetextid = item.id
        window.distributionShareSUccess = ()=>{
          saveShare(params)
        }
        if (this.$root.ISAPP) {
          let opt = {
            name: 'callAppShareDialog',
            params: {
              sharetitle: item.shareinfo.title,
              sharecontent: item.shareinfo.content,
              sharepicurl: item.shareinfo.icon,
              shareurl: item.shareinfo.url,
              xcxurl: item.shareinfo.scene,
              callbackname: 'distributionShareSUccess'
            }
          }
          this.javascriptBridge(opt)
        } else if (this.$root.ISWX) {
          this.isTips = true
          this.initShare({
            info:{
              title:item.shareinfo.title,
              desc:item.shareinfo.content,
              img:item.shareinfo.icon,
              url:item.shareinfo.url
            }
          })
          distributionShareSUccess()
        } else {
          this.loadApp()
        }
      }
    },

    loadmore(){
        if (this.css.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.pagination.pageindex += 1
        if (this.pagination.pageindex > 1) {
          this.pagination.hasLoad = false
        }
        this.getContent()
      }
    },

    dataLoad() {
      this.list = []
      this.pagination.pageindex = 1
      this.css.isEnd = false
      this.getContent()
    },
    okFn() {
      this.isTips = false
    }
    
  }
}
</script>
<style lang='scss' scoped>
.main {
  width: 100%;
  padding-top: 10px;
  background-color: #fff;
}
.headSwiper {
  padding-bottom: 15px;
}
.head-item {
  cursor: pointer;
  position: relative;
  width: auto;
  height: 48vw;
  img{
    cursor: pointer;
    height: 48vw;
    width: 100%;
  }
  .bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13.33vw;
    background: #fff;
    padding: 0 4vw;
    text-align: left;
    padding-top: 1.7vw;
    .likeBtn{
      position: absolute;
      width: 20px;
      height: 17px;
      background: url(/static/img/d_like1.png);
      background-size: 20px 17px;
      top: 2.2vw;
      right: 4vw;
      &.keep{
        background: url(/static/img/d_like2.png);
        background-size: 20px 17px;
      }
    }
  }
}
.head-item-price {
  cursor: pointer;
  height: 6.4vw;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  border-radius: 6.4vw 0 0 6.4vw;
  padding: 0 4.8vw;
  width: auto;
  position: absolute;
  bottom: 17.1vw;
  right: 0;
  display: flex;
  align-items: center;
  span{
    color: #ffce00;
    font-family: BASE_PRICE;
    font-size: 16px;
    padding-left: 4px;
  }
  em{
    float: left;
    background: url(/static/img/d_share.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-top: 0.3vw;
    margin-right: 4px;
  }
}
.head-item-title {
  cursor: pointer;
  font-size: 3.46vw;
  font-weight: 600;
  color: #333;
  line-height: 22px;
  width: 65vw;
}
.head-item-num {
  font-size: 12px;
  color: #333;
}
.head-item-like {
  margin-right: 8.2vw;
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_like.png);
    display: block;
    float: left;
    width: 12px;
    height: 13px;
    background-size: 12px 13px;
    margin-right: 4px;
  }
}
.head-item-news{
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_comment.png);
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-right: 4px;
  }
}
.category-swiper{
  position: sticky;
  top: 47px;
  z-index: 9 !important;
  background: #fff;
  &.inapp{
    top: -1px;
  }
}
.category-item {
  white-space: nowrap;
  width: auto;
  margin-right: 6.93vw;
  color: rgb(153, 153, 153);
  font-size: 14px;
  height: 31px;
  line-height: 24px;
}
.category-item:first-child {
  margin-left: 4.8vw;
}
.category-item.clicked {
  font-size: 14px;
  color: rgb(51, 51, 51);
  font-weight: 600;
}
.category-item.clicked::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: rgb(51, 51, 51);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translate(-50%, 0);
}
.commodity-list{
  margin-top: 4vw;
}
.commodity-item {
  cursor: pointer;
  width: 89.33vw;
  position: relative;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2.13vw;
  margin: 0 auto 4vw;
  overflow: hidden;
  padding-bottom: 3vw;
  img{
    cursor: pointer;
    height: 48vw;
    width: 100%;
  }
  .bottom{
    cursor: pointer;
    padding: 0 4vw;
    position: relative;
    margin-top: 8px;
    .likeBtn{
      position: absolute;
      width: 20px;
      height: 17px;
      background: url(/static/img/d_like1.png);
      background-size: 20px 17px;
      top: 0.6vw;
      right: 4vw;
      &.keep{
        background: url(/static/img/d_like2.png);
        background-size: 20px 17px;
      }
    }
  }
}
.commodity-item-price {
  cursor: pointer;
  height: 6.4vw;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  border-radius: 6.4vw 0 0 6.4vw;
  padding: 0 4.8vw;
  width: auto;
  position: absolute;
  bottom: 11.2vw;
  right: 0;
  display: flex;
  align-items: center;
  span{
    color: #ffce00;
    font-family: BASE_PRICE;
    font-size: 16px;
    padding-left: 4px;
  }
  em{
    float: left;
    background: url(/static/img/d_share.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-top: 0.3vw;
    margin-right: 4px;
  }
}
.commodity-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 22px;
  margin-bottom: 10px;
  width: 65vw;
}
.commodity-item-num {
  font-size: 12px;
  color: rgb(153, 153, 153);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4vw;
}
.commodity-item-like {
  margin-right: 8.2vw;
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_like.png);
    display: block;
    float: left;
    width: 12px;
    height: 13px;
    background-size: 12px 13px;
    margin-right: 4px;
  }
}
.commodity-item-news{
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_comment.png);
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-right: 4px;
  }
}
.shareTips{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
  .tips{
    position: absolute;
    width: 54vw;
    height: 50vw;
    top: 12vw;
    right: 8vw;
  }
  .btn{
    width: 44.8vw;
    height: 16.53vw;
    position: absolute;
    top: 83vw;
    left: 27vw;
  }
}
</style>
